<script setup lang="ts">
import { computed } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: any;
}>();
const { $global, $fn } = props.ujt;

const cmContentstyle = computed(() => {
    const tmpStyle: any = {};
    if (!$global.pop[props.id]?.nooverflow) {
        tmpStyle.overflow = $global.pop[props.id]?.conoverflow || 'auto';
    }
    return tmpStyle;
});
</script>

<template>
    <div class="as-pop-content" :style="cmContentstyle">
        <slot>
            <div class="as-pop-content-txt">
                {{ $global.pop[props.id]?.con || '' }}
            </div>
        </slot>
    </div>
    <div v-if="$global.pop[props.id]?.btns?.length" class="as-pop-content-btns">
        <template v-for="(item, index) in $global.pop[props.id].btns">
            <div
                v-if="item.fn"
                @touchstart.stop="$fn.As.eStop"
                @pointerdown.stop="$fn.As.eStop"
                @pointerup.stop="item.fn()"
                :class="index ? '' : 'cur'"
                :style="`${item.bg ? `background-color: ${item.bg};` : ''}`"
            >
                {{ item.nm }}
            </div>
            <div
                v-else
                :class="index ? 'nofn' : 'cur nofn'"
                :style="`${item.bg ? `background-color: ${item.bg};` : ''}`"
            >
                {{ item.nm }}
            </div>
        </template>
    </div>
</template>

<style scoped lang="scss">
.as-pop-content {
    flex-grow: 1;
    font-size: var(--fs1);

    .as-pop-content-txt {
        text-align: center;
        padding: 16px 12px;
        white-space: pre-wrap;
    }
}

.as-pop-content-btns {
    touch-action: none;
    user-select: none;
    text-align: center;
    border-radius: 0 0 18px 18px;
    padding: 16px;
    border-top: 1px solid var(--ch2);

    div {
        border-radius: 15px;
        display: inline-block;
        line-height: 38px;
        padding: 0 28px;
        margin: 0 8px;
        cursor: pointer;
        background-color: var(--ch2);
        color: var(--ch8);
    }

    .cur {
        background-color: var(--cm8);
        color: var(--cm0);
    }

    .nofn {
        cursor: not-allowed;
        opacity: 0.8;
    }
}
</style>
